<template>
    <div>
        <h1>作业</h1>


        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>ID</td>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>性别</td>
                </tr>
                <tr v-for="(item,index) in arrobj" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.sex}}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <hr/>

    <select>
        <option value="">请选择</option>
        <option v-bind:value="item.id" v-for="(item,index) in card">{{item.title}}</option>
    </select>
</template>

<script setup lang="ts">
import { ref,reactive } from 'vue'

let arrobj = reactive([
        { id: "1", name: "张飞", age: 18, sex: "男" },
        { id: "2", name: "燕飞", age: 20, sex: "女" },
        { id: "3", name: "孔明", age: 35, sex: "男" },
        { id: "4", name: "貂蝉", age: 17, sex: "女" },
        { id: "5", name: "孔融", age: 23, sex: "男" }
])

let card = reactive([
    { id: "1", title: "抽烟" },
    { id: "2", title: "喝酒" },
    { id: "3", title: "烫头" },
])
</script>

<style scoped>

</style>